<template>
    <div class="city-picker-wrap">
        <div class="mask" :class="{show:show}"></div>
        <div class="city-picker-box" :class="{show:show}">
            <div class="city-picker-header">
                <span class="close" @click="closePicker">×</span>
                <h4>配送至</h4>
            </div>
            <div class="city-picker-body">
                <ul class="address-slide-tabs">
                    <li :class="{active:active_tab==1}" @click="reselectProvince">{{province.code ? province.name : '请选择'}}</li>
                    <li :class="{active:active_tab==2}" @click="reselectCity" v-show="province.code">{{city.code ? city.name : '请选择'}}</li>
                    <li :class="{active:active_tab==3}" v-show="city.code">{{district.code ? district.name : '请选择'}}</li>
                </ul>
                <div class="address-slide-list-box">
                    <transition-group name='no-mode-translate-fade'>
                        <ul class="province-list" v-show="active_tab==1" key="address-slide-list-1">
                            <li v-for="(item,key) in province_list" :key="key" @click='setProvince(item)'>
                                <label :for="'province-'+key">
                                    <input type="radio" :id="'province-'+key" name="province-group" :value="key" v-model="province.code">
                                    <span class="icon-checked"></span>
                                    <div class="item-inner">{{item}}</div>
                                </label>
                            </li>
                        </ul>
                        <ul class="city-list" v-show="active_tab==2" key="address-slide-list-2">
                            <li v-for="(item,key) in city_list" :key="key" @click='setCity(item)'>
                                <label :for="'city-'+key">
                                    <input type="radio"  :id="'city-'+key" name="city-group" :value="key" v-model="city.code">
                                    <span class="icon-checked"></span>
                                    <div class="item-inner">{{item}}</div>
                                </label>
                            </li>
                        </ul>
                        <ul class="district-list" v-show="active_tab==3" key="address-slide-list-3">
                            <li v-for="(item,key) in district_list" :key="key" @click='setDistrice(item)'>
                                <label :for="'district-'+key">
                                    <input type="radio" :id="'district-'+key" name="district-group" :value="key" v-model="district.code">
                                    <span class="icon-checked"></span>
                                    <div class="item-inner">{{item}}</div>
                                </label>
                            </li>
                        </ul>
                    </transition-group>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import AreaData from "area-data";
export default {
  name: "city-picker",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    initData:null
  },
  data() {
    return {
      province: {
        code: null,
        name: null
      },
      city: {
        code: null,
        name: null
      },
      district: {
        code: null,
        name: null
      }
    };
  },
  computed: {
    province_list() {
      return AreaData["86"];
    },
    city_list() {
      return this.province.code ? AreaData[this.province.code] : [];
    },
    district_list() {
      return this.city.code ? AreaData[this.city.code] : [];
    },
    active_tab() {
      if (!this.province.code) {
        return 1;
      } else if (this.province.code && !this.city.code) {
        return 2;
      } else if (this.province.code && this.city.code) {
        return 3;
      }
    }
  },
  watch: {
    "district.code"(val) {
      if (val) {
        this.returnInfo();
      }
    },
    initData(val){
      if(val){
        this.province = val.province
        this.city = val.city
        this.district = val.district
      }
    }
  },
  mounted() {},
  methods: {
    setProvince(item) {
      this.province.name = item;
    },
    setCity(item) {
      this.city.name = item;
    },
    setDistrice(item) {
      this.district.name = item;
    },
    reselectProvince() {
      this.province = {
        code: null,
        name: null
      };
      this.city = {
        code: null,
        name: null
      };
      this.district = {
        code: null,
        name: null
      };
    },
    reselectCity() {
      this.city = {
        code: null,
        name: null
      };
    },
    closePicker() {
      this.$emit("close");
    },
    returnInfo() {
      let data = {
        province: this.province,
        city: this.city,
        district: this.district
      };
      this.$emit("get-city-info", data);
      this.closePicker();
    }
  }
};
</script>
<style lang="scss" scoped>
.city-picker-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  .mask {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 110;
  }
  .mask.show {
    top: 0;
  }
  .city-picker-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -340px;
    background: #fff;
    z-index: 111;
    transition: all 0.3s ease;
    .city-picker-header {
      position: relative;
      h4 {
        line-height: 35px;
        font-size: 15px;
        font-weight: 500;
        text-align: center;
      }
      span.close {
        display: block;
        position: absolute;
        top: 5px;
        right: 5px;
        padding: 5px;
        width: 30px;
        height: 30px;
        font-size: 20px;
        text-align: center;
        line-height: 1;
      }
    }
    .city-picker-body {
      ul.address-slide-tabs {
        font-size: 0;
        li {
          display: inline-block;
          width: 33.33%;
          position: relative;
          line-height: 25px;
          font-size: 14px;
          text-align: center;
          transition: all 0.3s ease;
        }
        li.active {
          border-bottom: 2px solid #23ab1b;
        }
      }
      .address-slide-list-box {
        position: relative;
        height: 270px;
        .no-mode-translate-fade-enter-active,
        .no-mode-translate-fade-leave-active {
          transition: all 0.3s ease;
        }
        .no-mode-translate-fade-enter,
        .no-mode-translate-fade-leave-active {
          opacity: 0;
        }
        .no-mode-translate-fade-enter {
          transform: translateX(100%);
        }
        .no-mode-translate-fade-leave-active {
          transform: translateX(-100%);
        }
        ul {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          overflow-y: auto;
          li {
            line-height: 35px;
            font-size: 13px;
            color: #666;
            label {
              display: block;
              position: relative;
              padding-left: 20px;
              input[type="radio"] {
                display: none;
              }
              input[type="radio"] + span.icon-checked {
                position: absolute;
                top: 50%;
                right: 20px;
                margin-top: -6px;
                width: 12px;
                height: 12px;
                background-image: url("~assets/img/mall/icon_check.png");
                background-repeat: no-repeat;
                background-size: contain;
                background-position: 50% 50%;
                opacity: 0;
                transition: all 0.15s ease;
              }
              input[type="radio"]:checked + span.icon-checked {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
  .city-picker-box.show {
    bottom: 0;
  }
}
</style>


